<script setup>
  import {ref} from 'vue'
        // 指令
    // 1.概念：作用在标签上，vue的特殊语法
    // 2.作用：增强标签渲染数据的能力 
    // 3.分类
      // 6.双向绑定指令: 数据<->视图(数据与视图相互影响)
  // 商品列表
  const goodsList = ref([
    { id: 101, name: 'biangbiang⾯', price: 13 },
    { id: 102, name: '葫芦头', price: 20 },
    { id: 103, name: '冰峰', price: 2 },
    { id: 104, name: '⾁夹馍', price: 11 },
    { id: 105, name: '⽺⾁泡馍', price: 18 }
  ])
  // 实现del函数
  let del = (index) => {
    if(confirm("确定要删除吗?"))
    goodsList.value.splice(index,1)
  }
</script>
<template>
  <!-- border-1px边框,cellpadding-表格内容与表格边框间距，cellspacing-表格之间间距 -->
  <table border="1" cellpadding="0" cellspacing="0">
    <!-- 专门用于table中的标题 -->
    <caption>
      <h3>菜单</h3>
    </caption>
    <!-- 表头 -->
    <thead>
      <!-- 行标签 -->
      <tr>
        <!-- 头标签 -->
        <th>商品名称</th>
        <th>商品价格</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- 表内容 -->
    <tbody>
      <tr v-for = "item,index in goodsList">
        <!-- 行内容 -->
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>
          <!-- 删除按钮,点击事件+传参 -->
          <button @click="del(index)">删除</button>
        </td>
      </tr>
    </tbody>
    <!-- 表结尾,设置当数组长度为0时显示 -->
    <tfoot v-if="goodsList.length === 0">
      <tr>
        <!-- colspan-跨行居中-要跨几行，设置为几行 -->
        <td colspan="3">暂时没有数据哦</td>
      </tr>
    </tfoot>
  </table>
</template>


<style scoped>
/* 表格整体格式 */
  table {
    /* 宽度 */
    width: 500px;
    /*  */
    margin: 150px auto;
    text-align: center;
    /* 字体格式 */
    font-family: 'Courier new',Courier,monospace;
  }
  /* 行格式 */
  tr {
    height: 40px;
  }
  /* 表尾格式 */
  tfoot {
    height: 100px;
  }
</style>